<template>
  <div class="department-statistics">
    <a-row :gutter="16">
      <a-col :span="12">
        <h3>各院系调课次数对比</h3>
        <chart-bar
          :data="adjustCountData"
          :height="300"
        />
      </a-col>
      <a-col :span="12">
        <h3>各院系调课率对比</h3>
        <chart-bar
          :data="adjustRateData"
          :height="300"
        />
      </a-col>
    </a-row>

    <a-table
      :columns="columns"
      :dataSource="data"
      rowKey="department"
      :pagination="false"
      style="margin-top: 24px"
    >
      <template slot="adjustRate" slot-scope="text">
        <a-tag :color="getRateColor(text)">{{ text }}</a-tag>
      </template>
    </a-table>
  </div>
</template>

<script>
import ChartBar from '@/components/Charts/ChartBar.vue'

const columns = [
  {
    title: '院系名称',
    dataIndex: 'department',
    width: 150
  },
  {
    title: '总课程数',
    dataIndex: 'totalCourses',
    width: 100
  },
  {
    title: '调课次数',
    dataIndex: 'adjustCount',
    width: 100
  },
  {
    title: '调课学时',
    dataIndex: 'adjustHours',
    width: 100
  },
  {
    title: '调课率',
    dataIndex: 'adjustRate',
    scopedSlots: { customRender: 'adjustRate' },
    width: 100
  }
]

export default {
  components: {
    ChartBar
  },
  // props: {
  //   data: {
  //     type: Array,
  //     default: () => [
       
  //     ]
  //   }
  // },
  data() {
    return {
      columns
    }
  },
  created() {
  	this.data=[ {
          department: '信息工程系',
          totalCourses: 120,
          adjustCount: 15,
          adjustHours: 30,
          adjustRate: '12.5%'
        },
        {
          department: '机电工程系',
          totalCourses: 80,
          adjustCount: 8,
          adjustHours: 16,
          adjustRate: '10.0%'
        },
        {
          department: '建筑工程系',
          totalCourses: 60,
          adjustCount: 5,
          adjustHours: 10,
          adjustRate: '8.3%'
        },
        {
          department: '汽车工程系',
          totalCourses: 90,
          adjustCount: 12,
          adjustHours: 24,
          adjustRate: '13.3%'
        }]
  },
  computed: {
    adjustCountData() {
      return {
        labels: this.data.map(item => item.department),
        datasets: [
          {
            label: '调课次数',
            backgroundColor: '#1890ff',
            data: this.data.map(item => item.adjustCount),
            barPercentage: 0.6
          }
        ]
      }
    },
    adjustRateData() {
      return {
        labels: this.data.map(item => item.department),
        datasets: [
          {
            label: '调课率(%)',
            backgroundColor: '#52c41a',
            data: this.data.map(item => parseFloat(item.adjustRate)),
            barPercentage: 0.6
          }
        ]
      }
    }
  },
  methods: {
    getRateColor(rate) {
      const value = parseFloat(rate)
      if (value > 15) return 'red'
      if (value > 10) return 'orange'
      return 'green'
    }
  }
}
</script>

<style scoped>
.department-statistics {
  padding: 16px;
  background: #fff;
  border-radius: 4px;
}

h3 {
  margin-bottom: 16px;
  text-align: center;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
}
</style>